<template>
	<view class="warp">
		<view class="search">
			<uni-nav-bar :fixed="false" color="#fff" background-color="#062450" shadow="true" right-icon="mic" @clickLeft="showCity" @clickRight="scan">
				<block slot="left">
					<view class="city">
						<view><text class="uni-nav-bar-text">{{ city }}</text></view>
						<uni-icons type="arrowdown" color="#fff" size="22" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜库卡机器人信息" @confirm="confirm">
				</view>
			</uni-nav-bar>
		</view>
		<view class="search-history">热搜：
			<span v-for="(item, index) in historyList" :index="index" :key="index">
				<text class="text">{{ item.text }}</text>
			</span>
		</view>
		<view >
			<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="section">机器人分类</view>
		<view >
			<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in robotClassifyList" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="section">机器人管理</view>
		<view >
			<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in robotManagementList" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
	
</template>

<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniSection,
			uniGrid,
			uniGridItem,
			uniBadge,
			uniIcons,
			uniNavBar
		},
		data() {
			return {
				city:"上海",
				historyList:[{
					text:"库卡机器人"
				},{
					text:"ABB-IRB120机器人"
				},{
					text:"Fanuc发那科"
				}],
				list: [{
						url: '/static/images/u0.svg',
						text: '扫一扫',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/images/u1.svg',
						text: '现场视频',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/images/u2.svg',
						text: 'My Robot',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/images/u3.svg',
						text: '服务中心',
						badge: '99',
						type: "warning"
					}
				],
				robotClassifyList: [{
						url: '/static/images/u6.svg',
						text: '品牌分布',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/images/u7.svg',
						text: '功能分类',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/images/u8.svg',
						text: '负载分类',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/images/u10.svg',
						text: '工作半径分类',
						badge: '99',
						type: "warning"
					}
				],
				robotManagementList: [{
							url: '/static/images/u9.svg',
							text: '密度管理',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u12.svg',
							text: '维保管理',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u11.svg',
							text: '运行状态',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u13.svg',
							text: '档案管理',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u14.svg',
							text: '备品备件',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u15.svg',
							text: '知识中心',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u16.svg',
							text: '三维仿真',
							badge: '0',
							type: "primary"
						},
						{
							url: '/static/images/u17.svg',
							text: '选项推荐',
							badge: '0',
							type: "primary"
						}
					]
			}		
			
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				
		
                var text = e.detail;
			// /	console.log(e.detail.index);
			// 	console.log(this.list);
				uni.navigateTo({
				                  url: '../attribute/list',
				                  success: res => {},
				                  fail: () => {},
				                  complete: () => {}
				});
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #062450;
		min-height: 100%;
		height: auto;
		color: #fff;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}
	/* #endif */
	.section{
		line-height: 28px;
		height: 28px;
		padding: 0 15px;
		background: rgb(8,55,126);
	}
	.search-history{
		padding-top: 10px ;
		padding-left: 15px;
	}
	.search-history span{
		padding: 0 10px;
		border-left: 1rpx solid #fff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		/* position: relative;
 */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}
	.city {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			/* width: 160rpx;
	*/
			margin-left: 4px;
			color: #fff;
		}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			/* width: 500rpx;
	*/
			flex: 1;
			background-color: #f8f8f8;
			height: 30px;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: 30px;
		}
	
		.input-uni-icon {
			line-height: 30px;
		}
	
		.nav-bar-input {
			height: 30px;
			line-height: 30px;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 28rpx;
			background-color: #f8f8f8;
		}
	
		.search {
			padding: 0;
		}
</style>